<template>
  <div
    class="infoWindow"
    style="background: #fff; border-radius: 5px; position: relative"
  >
    <p class="titles">路网信息</p>
    <div class="content" style="text-align: left">
      <p class="item-r">路网名称：{{ value.roadNetworkName }}</p>
      <p class="item-r">绑定的路线：{{ value.trafficRoadLineName || "-" }}</p>
      <p class="item-r">备注信息：{{ value.memo || "-" }}</p>
    </div>

    <Icon
      v-if="isClose"
      class="dclose"
      type="ios-close"
      size="16"
      @click="closeClick"
    />
  </div>
</template>

<script>
import componentName from "./component/index";
import { lookGrid } from "@/api/gis";
export default {
  name: "infoWindow",
  props: {
    value: {
      type: Object,
      default: () => {},
    },
    tabs: {
      type: Array,
      default: () => [],
    },
    isClose: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    return {
      componentName,
      activeNames: "",
      obj: {},
    };
  },
  watch: {
    value: {
      handler(val) {
        if (Object.keys(val)?.length) {
          this.lookGrid();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    activeName() {
      if (this.activeNames) {
        let c = () => import(`${this.componentName[this.activeNames]}`);
        return c;
      }
    },
  },
  mounted() {},

  methods: {
    // 查看详情
    lookGrid() {
      lookGrid(this.value.id).then((res) => {
        this.obj = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.infoWindow {
  padding: 10px;
  .titles {
    font-size: 15px;
  }
  .item-r {
    margin: 6px 0 !important;
  }
  .ivu-icon-ios-close {
    cursor: pointer;
    text-align: right;
    position: absolute;
    right: 10px;
    top: 10px;
    &:focus {
      background-color: rgba(128, 128, 128, 0.281);
    }
    &:hover {
      background-color: rgba(128, 128, 128, 0.281);
    }
  }

  // 3d关闭弹窗
  .dclose {
  }
}
</style>
